import {useEffect, useRef, useState} from "react";

/**
 * 这里学习 useState方法 和 函数式更新（防止并发问题）
 * setCount(count + 1);                 可能有并发问题
 * setCount(count => count + 1);        防止有并发问题
 * @returns {JSX.Element}
 * @constructor
 */
function Counter({maxLimit,minLimit}) {

    // 1. 使用 useState 定义状态：
    //    - count: 状态的当前值，初始值为 0
    //    - setCount: 专门用来更新 count 值的函数
    const [count, setCount] = useState(0);

    const prevCount = useRef(0);

    // 接受包含命令式、可能有效的代码的函数
    useEffect(
        // 使用 useEffect (空数组 []，只运行一次)
        () => {
        // 这段代码只在组件第一次出现在屏幕上时运行一次
        console.log("Counter 组件已挂载到 DOM，开始工作！");
        // [可选] 清理函数：在组件从 DOM 上移除时运行
        return () => {
            console.log("Counter 组件被卸载了，进行资源清理...");
            // 如果你设置了定时器或监听器，在这里清除它们！
        };
    }, []); // <--- 关键：空数组 []

    // 接受包含命令式、可能有效的代码的函数
    useEffect(
        // 使用 useEffect
        () => {
            // 副作用：修改浏览器标签页的标题
            // `` 反引号 代表 JS的字符串模板 ${} 代表字符串模板嵌入的 变量、表达式、函数调用等
            // ES6+ 新特性 设置浏览器标签页的标题
            document.title = `当前计数: ${count}`;
            // 每次 count 变化时，都会执行这里的代码
          // 向控制台输出日志
            console.log(`[Effect运行] count 变化了，新值为: ${count}`);
        }, [count]); // <--- 关键 当count发生变化时，触发这个useEffect方法




    // 2. 定义事件处理函数：
    const addCount = () => {
        // 3. 更新状态：
        //    - 必须使用 setCount 来改变 count 的值
        //    - React 接收到这个更新后，会重新执行 Counter 函数，
        //      界面的 count 也会随之改变。
        setCount(count => {
            if (count >= maxLimit) {
                alert(`计数器以达到上限！ ${maxLimit}`);
                return count;
            }
            prevCount.current = count;
            return count + 1;
        })
    };

    // 定义一个方法
    const subtractCount = () => {
        setCount(count => {
            if (count <= minLimit) {
                alert(`计数器达到下限！ ${minLimit}`);
                return count;
            }
            return count - 1;
        })
    }


    return (
        <div>
            {/* 4. 显示状态值 */}
            <h1>当前计数：{count}</h1>
            <h1>上次计数：{prevCount}</h1>
            {/* 5. 绑定事件：注意是 onClick，且值是函数 */}
            <button onClick={addCount}>
                点我 + 1
            </button>
            {/* 你也可以直接在 JSX 里写更新逻辑 */}
            <button onClick={subtractCount}>
                点我 - 1
            </button>
        </div>
    );
}

export default Counter;
